<!-- tabs标签组件:pTabs -->
<template>
	<view class="tabs-body">
		<u-tabs :list="tabsList" :lineHeight="lineHeight" :lineWidth="lineWidth" :lineColor="lineColor"
			:activeStyle="activeStyle" @click="tabsClick"></u-tabs>
	</view>
</template>

<script>
	export default {
		props: {
			tabsList: {
				type: Array,
				default: () => ([{
						name: '待调查',
						value: 0,
					},
					{
						name: '已调查',
						value: 1
					}
				])
			},
			// 菜单选择中时的样式
			activeStyle: {
				type: Object,
				default: () => ({
					color: '#0052D9',
					fontWeight: 'bold',
				})
			},
			// 滑块高度
			lineHeight: {
				type: String,
				default: '5rpx'
			},
			// 滑块长度
			lineWidth: {
				type: String,
				default: '30rpx'
			},
			// 滑块颜色
			lineColor: {
				type: String,
				default: '#0052D9'
			}
		},
		data() {
			return {}
		},
		methods: {
			/**
			 * 点击tabs
			 */
			tabsClick(e) {
				console.log('点击tabs:', e);
				this.$emit('tabsClick', e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-body {

		// 标签居中
		/deep/ .u-tabs__wrapper__nav__item {
			flex: 1 1 0% !important;
		}
	}
</style>